<template>
  <a-modal
    :open="visible"
    :title="isEdit ? '编辑用户' : '新增用户'"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :confirm-loading="loading"
    class="min-w-11/12"
    :mask-closable="false"
  >
    <a-spin :spinning="loading">
      <a-form :model="userForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" class="w-full">
        <a-form-item label="账号">
          <a-input v-model:value="userForm.userAccount" :disabled="isEdit" />
        </a-form-item>
        <a-form-item label="昵称">
          <a-input v-model:value="userForm.userName" :disabled="!isEdit" />
        </a-form-item>
        <a-form-item label="头像">
          <a-input v-model:value="userForm.userAvatar" />
        </a-form-item>
        <a-form-item label="简介">
          <a-input v-model:value="userForm.userProfile" type="textarea" />
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-model:value="userForm.userRole">
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="user">普通用户</a-select-option>
            <!-- 可以添加更多角色选项 -->
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, watch, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { addUserUsingPost, updateUserUsingPost, getUserByIdUsingGet } from '@/api/userController.ts'

const emit = defineEmits(['success', 'update:visible'])
const props = defineProps<{
  visible: boolean
  record?: API.UserVo // 如果是编辑则需要用户记录
  isEdit: boolean // 标记是否为编辑模式
}>()

const loading = ref(false)
const userForm = reactive<API.UserAddRequest>({
  userAccount: '',
  userName: '',
  userAvatar: '',
  userProfile: '',
  userRole: 'user',
})

// 初始化表单数据
watch(
  () => props.record,
  async (newRecord) => {
    if (props.visible && newRecord && props.isEdit) {
      // 编辑时使用选中的记录初始化表单
      Object.assign(userForm, {
        userAccount: newRecord.userAccount || '',
        userName: newRecord.userName || '',
        userAvatar: newRecord.userAvatar || '',
        userProfile: newRecord.userProfile || '',
        userRole: newRecord.userRole || 'user',
      })
    } else if (props.visible) {
      // 新增时清空表单
      Object.assign(userForm, {
        userAccount: '',
        userName: '',
        userAvatar: '',
        userProfile: '',
        userRole: 'user',
      })
    }
  },
  { immediate: true },
)

const handleSubmit = async () => {
  loading.value = true
  try {
    if (props.isEdit) {
      const updateData: API.UserUpdateRequest = {
        id: props.record?.id!,
        ...userForm,
      }
      const res = await updateUserUsingPost(updateData)
      if (res.code === 0) {
        message.success('编辑成功')
        emit('success')
      }
    } else {
      const res = await addUserUsingPost(userForm as API.UserAddRequest)
      console.log('res', res)
      if (res.code === 0) {
        message.success('添加成功')
        emit('success')
      }
    }
  } catch (error) {
    message.error('操作失败')
  } finally {
    loading.value = false
    handleCancel()
  }
}

const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped></style>
